<template>
	<view>
		<view class="UCenter-bg">
			<view aria-role="button" class="user-info-box" @click="wsmNavTo('/pages_mine/users/uacid-view')">
				<view aria-hidden="true" class="portrait-box">
					<image class="portrait" :src="users.avatar || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box arrow" style="margin-left: 3%;font-size: larger;">
					<view class="username">{{users.state != '-2'? (users.nickName || '未设置昵称') : '请登录' }}</view>
					<view class="cu-capsule round" v-if="users.state != '-2'">
						<text :class="users.state=='1'?'bg-green':'bg-white text-orange'" class='cu-tag top-t'>{{users.state=='1'?'实名用户':'普通用户'}}</text>
					</view>
					<view class="cu-capsule round">
						<text v-if="users.state=='1'" :class="users.stateId=='1'?'bg-red':'bg-white text-orange'" class='cu-tag top-t'>{{users.stateId=='1'?'本地户籍':'外地户籍'}}</text>
					</view>
				</view>
				<view class="cuIcon-right top_icon" ></view>
			</view>
			<image aria-role="button" aria-label="服务记录" src="/static/fwjl.png" mode="scaleToFill" style="width: 710rpx;height: 84rpx;top:34rpx;" @click="navTo('/pages_mine/trade/ord-list')"></image>
		</view>
 		<view class="radius margin-top-xl margin-left margin-right box">
			<view aria-role="button" class="btn_box bg-white padding-sm" @click="navTo('/pages_mine/users/ucoup-list')">
				<text class="icon_left iconfont icon-kajuan text-orange"></text>
				<text>消费劵</text>
				<text class="icon_right iconfont icon-jiantouarrow487 text-gray"></text>
			</view>
			<view aria-role="button" class="btn_box bg-white padding-sm"  @click="navTo('/pages_mine/users/ubank-list')">
				<text class="icon_left iconfont icon-yinhangka text-green text-orange"></text>
				<text>银行卡</text>
				<text class="icon_right iconfont icon-jiantouarrow487 text-gray"></text>
			</view>
			<view aria-role="button" class="btn_box bg-white padding-sm" @click="navTo('/pages_mine/users/uaddr-list')">
				<text class="icon_left iconfont icon-dizhi text-blue"></text>
				<text>收货地址</text>
				<text class="icon_right iconfont icon-jiantouarrow487 text-gray"></text>
			</view>
		</view>
		<view class="radius margin-top margin-left margin-right box">
			<view aria-role="button" class="btn_box bg-white padding-sm" @click="wsmNavTo('/pages_serv/news/feedback')">
				<text class="icon_left iconfont icon-bangzhu text-red"></text>
				<text>帮助说明</text>
				<text class="icon_right iconfont icon-jiantouarrow487 text-gray"></text>
			</view>
			<view aria-role="button" class="btn_box bg-white padding-sm" @click="navTo('/pages_serv/news/fsave')">
				<text class="icon_left iconfont icon-tousu1 text-yellow"></text>
				<text>建议与反馈</text>
				<text class="icon_right iconfont icon-jiantouarrow487 text-gray"></text>
			</view>
		</view>
		<view class="radius margin-top margin-left margin-right box">
			<view aria-role="button" class="btn_box bg-white padding-sm" @click="wsmNavTo('/pages_serv/news/agree')">
				<text class="icon_left iconfont icon-xieyi text-cyan"></text>
				<text>服务协议与政策</text>
				<text class="icon_right iconfont icon-jiantouarrow487 text-gray"></text>
			</view>
			<view aria-role="button" class="btn_box bg-white padding-sm" @click="wsmNavTo('/pages_serv/news/about')">
				<text class="icon_left iconfont icon-guanyuwomen3 text-blue"></text>
				<text>关于我们</text>
				<text class="icon_right iconfont icon-jiantouarrow487 text-gray"></text>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {}
		},
		onLoad() {
			this.getMineData();
		},
		computed: {
			...mapState(['hasLogin', 'users'])
		},
		methods: {
			getMineData(){
				uni.showLoading({title:"加载中"});
				this.$request.getForm('/view/vmui/mine').then(
					res => {
						uni.hideLoading();
					}
				);
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if(this.users.stateId != '1'){
					uni.showModal({
						title: '提示',
						content: '本次操作需要您进行实名登录验证',
						showCancel: true,
						confirmText: '确定',
						success: (e) => {
							if (e.confirm) {
								// #ifdef MP-WEIXIN
								uni.navigateTo({url: '/pages_mine/users/askme'});
								// #endif
								// #ifdef H5
								uni.navigateTo({url: '/pages/admin/login'});
								// #endif
							}
						}
					})
				} else {
					uni.navigateTo({url: url})
				}
			},
			wsmNavTo(url) {
				uni.navigateTo({url: url})
			}
		}
	}
</script>

<style>
	.UCenter-bg {
		background-image: url(http://wx.hzcl.org.cn/images/aid-apps-mui/wode10.png);
		background-size: cover;
		height: 400rpx;
		display: flex;
		justify-content: center;
		padding-top: 30rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 140rpx;
		height: 140rpx;
	}

	.img-w {
		width: 786rpx;
		height: 100rpx;
		top: 48rpx;
	}

	.user-info-box {
		width: 700upx;
		height: 180upx;
		align-items: center;
		display: flex;
		position: relative;
		z-index: 1;
		margin-top: 44rpx;

	}

	.user-info-box.arrow {
		position: absolute;
		top: 0;
		right: 16px;
		bottom: 0;
		display: block;
		margin: auto;
		width: 16px;
		height: 16px;
		color: #8799a3;
		content: "\e6a3";
		text-align: center;
		font-size: 18px;
		font-family: cuIcon;
		line-height: 16px;
	}

	.user-info-box.portrait {
		width: 130upx;
		height: 130upx;
	}

	.portrait {
		border-radius: 70upx;
	}

	.top-t {
		top: 12upx;
		border-radius:16upx;
		font-weight: 700;
	}
	.box{
		
	}
	.box>.btn_box{
		height: 100rpx;
		padding-left: 30rpx;
		font-size: 34rpx;
		line-height: 50rpx;
		border-bottom: solid 1px #eee;
		color: #333;
	}
	.box>.btn_box:nth-of-type(1){
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.box>.btn_box:nth-last-of-type(1){
		border-bottom: 0;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	.box>.btn_box>.icon_left{
		padding-right: 20rpx;
		font-size: 52rpx;
	}
	.box>.btn_box>.icon_right{
		display: inline-block;
		float: right;
		font-size: 34rpx;
	}
	.top_icon{
		position: absolute;
		right: 30rpx;
	}
</style>
